<template>
  <div id="app">
<!--  	 <div class="" id="top">猫眼电影</div>-->
  	 <mt-header fixed  :title="headerTitle">
  	 	<mt-button icon='back' slot='left' @click="$router.go(-1)"></mt-button>
  	 </mt-header>
  
    <!--路由渲染视窗  
    	  即：路由将不同对应的模板渲染进来，所以就不存在页面的跳转问题
    -->
    <!--最大组件下的子路由渲染视窗-->
    <router-view/>
  </div>
</template>


<script type="text/javascript">
	export default{
		data(){
			return {
				  
			}
		},
	
		computed:{
			headerTitle(){  //数据依赖更新时，计算属性重新触发更新
				return this.$store.state.headerTitle
			}
		}
	}
</script>

<style lang="scss">
	*{
		margin: 0;
		padding: 0;
	}
	li{
		list-style: none;
	}
	

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
	position: relative;
	.mint-header.is-fixed{
		z-index:10;
	}
  #top{
  	width: 100%;
  	position: absolute;
  	top: 0;
  	height:50px;
  	background: red;
  	color:white;
  	font-size: 16px;
  	line-height:50px;
  	
  }
}
#nav {
  padding: 65px;
  .titel{
  	display: inline-block;
  
 
  }
}
</style>
